<template>
  <div>
    <!-- 快递费规则配置表格 -->
    <div class="add_btn">
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <!-- <a-button style="margin-left: 20px" @click="handleDelect">删除</a-button> -->
      <a-button style="margin-left: 20px" @click="handCopy">复制</a-button>
    </div>
    <div class="tableContent">
    <!--使用draggable组件-->
    <!-- <draggable v-model="tableListData" chosenClass="chosen" forceFallback="true" group="people"
      animation="1000" @start="onStart" @end="onEnd"> -->
    <!-- {{tableListData}} -->
    <div class="listTable" v-for="(tableItem, tableIndex) in tableListData" :key="tableIndex">
      <div class="delectBtn">
         <a-popconfirm
          title="您确定要删除该表格吗？"
          placement="left"
          ok-text="确定"
          cancel-text="取消"
          @confirm="handleDelect(tableIndex)"
          @cancel="cancelDelect"
        >
          <div class="delectDiv">
            <img src="../../assets/cut.png" alt="">
          </div>
        </a-popconfirm>
      </div>
      <div class="mainTable">
        <table cellspacing="0" class="tableStyle">
          <thead>
            <tr>
              <!-- <th style="width: 20px;z-index:2;background-color: #fafafa;">
                <input type="checkbox" name="" id="" />
              </th> -->
              <th style="z-index:2;width: 14px;background-color: #fafafa;">编号</th>
              <th style="width:50px;">地区/重量区间</th>
              <th
                style="width:50px; white-space: nowrap"
                v-for="(thItem, thIndex) in tableItem.titleList"
                :key="thIndex"
              >
                <div style="position: relative">
                  <!-- <input class="weightThStyle" v-model="thItem.startWeight" type="text" placeholder="" /> -->
                  <a-input-number v-if="true" v-model="thItem.weightBeginValue" 
                  class="weightThStyle" :min="0" :max="2147483647" :precision="3" :disabled="btnDisabled"/>
                  <template v-else>
                    {{ 2147483647 }}
                  </template>
                  -
                  <a-input-number  v-if="true" v-model="thItem.weightEndValue" 
                  class="weightThStyle" :min="0" :max="2147483647" :precision="3" :disabled="btnDisabled"/>
                 <template v-else>
                    {{ 2147483647 }}
                  </template>
                  <!-- <input class="weightThStyle" v-model="thItem.endWeight" type="text" placeholder="" /> -->

                  <span class="editStyle">
                    <img src="../../assets/editPen.png" alt="" />
                  </span>
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent>
                      <img class="moreStyle" src="../../assets/more.png" alt="" />
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item @click="addColumn(tableIndex, thIndex)">
                          <a href="javascript:;">添加列</a>
                        </a-menu-item>
                        <a-menu-item @click="delectColumn(tableIndex, thIndex)">
                          <a href="javascript:;">删除列</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                  <!-- <span class="moreStyle" @click.stop="handleMore(thItem)">
                      <img src="../assets/more.png" alt="">
                    </span>
                    <ul class="operationDiv" v-show="thItem.isShow">
                      <li @click.stop="addColumn(tableIndex,thIndex)">添加列</li>
                      <li @click.stop="delectColumn(tableIndex,thIndex)">删除列</li>
                    </ul> -->
                </div>
              </th>
              <th style="width:50px">首重(kg)</th>
              <th style="width:50px">首重价格(元)</th>
              <th style="width:50px">续重(kg)</th>
              <th style="width:50px">续重价格(元)</th>
              <th style="width:30px;background-color: #fafafa;" class="operationRow">
                操作
              </th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(tdItem, tdIndex) in tableItem.tableData" :key="tdIndex">
              <!-- <td><input type="checkbox" name="" id="" /></td> -->
              <td>{{ tdIndex + 1 }}</td>
              <td>
                <a-tree-select
                    v-model="tdItem.treeValue"
                    style="width:90%"
                    tree-checkable
                    tree-data-simple-mode
                    :load-data="onLoadData"
                    :tree-data="treeData2"
                    :replaceFields="{
                        children: 'child',
                        title: 'name',
                        key: 'areaId',
                        value: 'areaId'
                    }"
                    :show-checked-strategy="SHOW_PARENT"
                    @change="keys => {TreeChange(keys, tdIndex,tableIndex)}"
                />
              </td>
              <!-- 动态列 开始-->
              <td v-for="(weightItem, weightIndex) in tdItem.weightList" :key="weightIndex">
                <!-- <input class="weightStyle" type="number" name="" id="" v-model="weightItem.weightPrice" /> -->
                <a-input-number 
                v-model="weightItem.weightPrice" 
                class="inputStyle" :min="0" :max="2147483647" :precision="2" :disabled="btnDisabled"/>
              </td>
              <!-- 动态列 结束-->
              <td>
                <a-input-number 
                v-model="tdItem.firstWeight" 
                class="inputStyle" :min="0" :max="2147483647" :precision="2" :disabled="btnDisabled"/>
                <!-- <input class="inputStyle" type="text" name="" id="" v-model="tdItem.firstWeight" /> -->
              </td>
              <td>
                  <a-input-number 
                  v-model="tdItem.firstWeightPrice" 
                  class="inputStyle" :min="0" :max="2147483647" :precision="2" :disabled="btnDisabled"/>
                <!-- <input class="inputStyle" type="text" name="" id="" v-model="tdItem.firstHeavyPrice" /> -->
              </td>
              <td>
                  <a-input-number 
                  v-model="tdItem.continuedWeight" 
                  class="inputStyle" :min="0" :max="2147483647" :precision="2" :disabled="btnDisabled"/>
                <!-- <input class="inputStyle" type="text" name="" id="" v-model="tdItem.continuedHeavy" /> -->
              </td>
              <td>
                  <a-input-number 
                  v-model="tdItem.continuedWeightPrice" 
                  class="inputStyle" :min="0" :max="2147483647" :precision="2" :disabled="btnDisabled"/>
                <!-- <input class="inputStyle" type="text" name="" id="" v-model="tdItem.continuedPrice" /> -->
              </td>
              <td class="operationRow">
                <!-- 新增行 -->
                <span
                  v-if="tableItem.tableData.length == tdIndex + 1"
                  style="margin-right: 6px"
                  @click="addTableRow(tableIndex, tdItem)"
                >
                  <img src="../../assets/zengjia.png" alt="" />
                </span>
                <!-- 删除行 -->
                <!-- <span v-if="tdItem.number != 1"> -->
                <span style="margin-right: 6px" @click="deletTableRow(tableIndex, tdItem)">
                  <img src="../../assets/jian.png" alt="" />
                </span>
                <span style="margin-right: 6px" @click="handleSortUp(tableIndex, tdIndex, tdItem)">
                  <img src="../../assets/top.png" alt="" />
                </span>
                <span @click="handleSortDown(tableIndex, tdIndex, tdItem)">
                  <img src="../../assets/down.png" alt="" />
                </span>
                <!-- <a-button style="margin-left:20px;" @click="handleSortUp(tableIndex,tdIndex,tdItem)">上移</a-button> -->
                <!-- <a-button style="margin-left:20px;" @click="handleSortDown(tableIndex,tdIndex,tdItem)">下移</a-button> -->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- </draggable> -->
    <!-- <div>
      <a-button style="background-color: #f5ae60; border: none" type="primary" @click="submit">确定 </a-button>
    </div> -->
    </div>

    <!-- 复制 - 表格 开始-->
    <div class="copySetupRules">
        <a-modal
            title="复制设置规则界面"
            switchFullscreen
            :visible="copyVisible"
            :confirm-loading="confirmLoading"
            @ok="copyRulesOk"
            @cancel="copyRulesCancel"
            width="60%"
            >
          
            <!-- :rules="copyRules" -->
              <a-form-model
                ref="copyForm"
                :model="copyform"
                layout="inline"
              >
                <a-form-model-item ref="projectName" label="项目名称" style="width:40%;margin-left:90px" prop="projectName" >
                    <a-input placeholder="请输入项目名称" v-model="copyform.projectName" style="width:300px"  :maxLength="128" allowClear>
                    </a-input>
                </a-form-model-item>
                <a-form-model-item ref="customerForm" label="客户"  style="margin-left:45px;" prop="customerForm">
                    <a-select 
                        style="width:300px" 
                        show-search
                        :filter-option="filterOption"
                        @change="formCustomerChange"
                        v-model="copyform.customerForm"
                        placeholder="请选择客户"
                        allowClear
                    >
                        <a-select-option :key="index" v-for="(item, index) in copyform.customerFormList" :value="item.customerCode">
                            {{item.customerName}}
                        </a-select-option>
                        <a-select-option value="b-other">
                            其他
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item ref="expressCompany" label="快递公司"  style="width:40%;margin-left:90px;margin-top:10px" prop="expressCompany"  >
                    <a-select 
                    placeholder="请选择快递公司" 
                    style="width: 300px"  
                    v-model="copyform.expressCompany" 
                    allowClear >
                        <a-select-option :key="index" v-for="(item, index) in copyform.expressCompanyList" :value="item.companyCode">
                            {{item.companyCode}}
                        </a-select-option>
                        <a-select-option value="b-other">
                            其他
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <span class="button_Style">
                  <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                  <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
                </span>
            </a-form-model>
              <a-table
                :loading="copyTableLoading"
                :columns="copyColumns" 
                :data-source="copyTableData"
                :pagination="true"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: 'radio', }" 
                bordered
                rowKey="id"
                style="margin-top:20px"
                type="radio"
                >
                <span slot="projectName" slot-scope="text, record" href="javascript:;">
                    <a-tooltip placement="topLeft">
                        <template slot="title">
                        <span>{{text}}</span>
                        </template>
                        <span @click="doLook(record)" style="color:#f8ac59;cursor:pointer;">{{text}}</span>
                    </a-tooltip>
                </span>
            </a-table>
        </a-modal>
    </div>
    <!-- 复制 - 表格 结束-->
  </div>
</template>

<script>
// import draggable from "vuedraggable";
import { TreeSelect } from 'ant-design-vue'
import { getTreeData ,onLoadData  } from "../../utils/util";
import { getExpressFeeRules,getCustomerName ,getLogisticsList,getExpressFeeDetail } from '@/api/api'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
const baseTable = {
  titleList: [
    {
      // id: 1,
      weightBeginValue: '',
      weightEndValue: '',
      // isShow: false,
    },
  ],
  tableData: [
    {
      index: 1,
      weightList: [
        {
          weightPrice: '',
        },
      ],
    },
  ],
}
const copyColumns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            ellipsis: true,
            customRender:(taxe,records,index)=>`${index + 1}`
        },
        {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName',
            scopedSlots: { 
              customRender: 'projectName' 
            },
            align: 'center',
            ellipsis: true,
        },
        {
            title: '客户',
            dataIndex: 'customerCode',
            key: 'customerCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '货主',
            dataIndex: 'ownerCode',
            key: 'ownerCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '快递公司',
            dataIndex: 'companyCode',
            key: 'companyCode',
            align: 'center',
            ellipsis: true,
        },
         {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            ellipsis: true,
        },
         {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            ellipsis: true,
        },
];
export default {
  props:["organizeId","warehouseCode","tableListInfo"],
  // components: { draggable },
  data() {
    return {
      StartNum: null,
      EndNum: null,
      drag: false,
      tableMoudle: [
        {
          titleList: [
            {
              weightBeginValue: '',
              weightEndValue: '',
            },
          ],
          tableData: [
            {
              index: 1,
              weightList: [
                {
                  weightPrice: '',
                },
              ],
              firstWeight: '',
              firstWeightPrice: '',
            },
          ],
        },
      ],
      count: 1,
      showHidden: false,
      tableListData: [],
      // treeData: this.$handleTree,
      treeValue:[],
      checkObj: [],
      SHOW_PARENT,
      copyVisible:false,
      confirmLoading:false,
      copyColumns,
      copyform: {
        projectName:"",
        customerForm:undefined,
        customerFormList: [],
        expressCompany:undefined,
        expressCompanyList:[],
      },
      copyTableData:[],
      copyTableLoading:false,
      drawerWidth:'100%',
      selectedRowKeys: [], // 当前选择集合
      btnDisabled:false,
      treeData2: [
        {
          id: '11000000',
          areaId: '11000000',
          name: '全国',
          province: '',
          city: '',
          area: '',
          town: ''
        }
      ],
    }
  },
  methods: {
    //开始拖拽事件
    onStart(e) {
      // console.log(e);
      this.drag = true
    },
    //拖拽结束事件
    onEnd(e) {
      // console.log(e);
      this.drag = false
    },
    //新增表格
    handleAdd() {
      // this.tableListData.push(baseTable);
      this.tableListData.push(JSON.parse(JSON.stringify(baseTable)))
    },
    //删除表格
    handleDelect(tableIndex) {
      if (this.tableListData.length === 1) {
        return this.$message.warning('已经是最后一个表格了')
      } else {
        let rowItemIndex = this.tableListData.findIndex(function (ele,index) {
          return index == tableIndex
        })
        if (rowItemIndex == -1) {
          return this.$message.success('删除表格失败')
        }
        this.tableListData.splice(rowItemIndex, 1)
        console.log('表格',this.tableListData)
        this.$message.success('删除表格成功')
      }
    },
    cancelDelect(){
      
    },
    // 新增表格列
    // tableNumber : 表格的序号 thNumber : 列的序号
    addColumn(tableNumber, thNumber) {
      let that = this
      // this.tableListData.forEach((item) => {
      //   item.titleList.map((val) => {
      //     val.isShow = false
      //   })
      // })
      let columnTh = {
        //表头
        // id: (thNumber += 1),
        weightBeginValue: '',
        weightEndValue: '',
        // isShow: false,
      }
      let columnTd = {
        //内容
        weightPrice: '',
      }

      // columnTd["weightPrice" + columnTh.id] = ''
      this.tableListData[tableNumber].titleList.push({ ...columnTh })
      this.tableListData[tableNumber].tableData.forEach((ele, index) => {
        ele.weightList.push({ ...columnTd })
      })
      this.$message.success('添加列成功')
    },
    // 删除表格列
    // tableNumber : 表格的序号 thNumber : 被删除列的序号
    delectColumn(tableNumber, thNumber) {
      //1、删除列头
      let columnHeadIndex = this.tableListData[tableNumber].titleList.findIndex(function (ele, index) {
        return index == thNumber
      })
      this.tableListData[tableNumber].titleList.splice(columnHeadIndex, 1)
      // 2、删除对应的列
      let columnContentIndex = -1
      this.tableListData[tableNumber].tableData.forEach((ele, index) => {
        columnContentIndex = ele.weightList.findIndex(function (ele, index) {
          return index == thNumber
        })
        ele.weightList.splice(columnContentIndex, 1)
      })
      if (columnHeadIndex == -1 || columnContentIndex == -1) {
        return this.$message.success('删除列失败')
      } else {
        this.$message.success('删除列成功')
      }
    },
    // 增加表格行
    // tableNumber : 表格的序号  rowItem : 被删除行的对象
    addTableRow(tableNumber, rowItem) {
      let indexNum = rowItem.index
      let baseTrRow = {
        index: (indexNum += 1),
        weightList: [],
      }
      let weightArr = { weightPrice: '' }
      rowItem.weightList.forEach((ele, index) => {
        //根据列头的数量，生成对应的列
        baseTrRow.weightList.push({ ...weightArr })
      })
      this.tableListData[tableNumber].tableData.push(JSON.parse(JSON.stringify(baseTrRow)))
      // console.log(baseTrRow);
      this.$message.success('添加行成功')
    },
    // 删除表格行
    // tableNumber : 表格的序号  rowItem :  被删除行的对象
    deletTableRow(tableNumber, rowItem) {
      if (this.tableListData[tableNumber].tableData.length === 1) {
        return this.$message.warning('已经是最后一行，不能再删除了哦')
      } else {
        let rowItemIndex = this.tableListData[tableNumber].tableData.findIndex(function (ele) {
          return ele.index == rowItem.index
        })
        if (rowItemIndex == -1) {
          return this.$message.success('删除行失败')
        }
        this.tableListData[tableNumber].tableData.splice(rowItemIndex, 1)
        this.$message.success('删除行成功')
      }
    },
    // 上移
    handleSortUp(tableNumber, trIndex, row) {
      let tableItem = this.tableListData[tableNumber].tableData
      if (trIndex > 0) {
        let upDate = tableItem[trIndex - 1]
        tableItem.splice(trIndex - 1, 1)
        tableItem.splice(trIndex, 0, upDate)
        this.$message.success('上移成功')
      } else {
        this.$message.warning('已经是第一条数据了')
      }
    },
    //下移
    handleSortDown(tableNumber, trIndex, row) {
      let tableItem = this.tableListData[tableNumber].tableData
      if (trIndex + 1 === tableItem.length) {
        this.$message.warning('已经是最后一条数据了')
      } else {
        console.log(trIndex)
        let downDate = tableItem[trIndex + 1]
        tableItem.splice(trIndex + 1, 1)
        tableItem.splice(trIndex, 0, downDate)
        this.$message.success('下移成功')
      }
    },
    //转换后台需要的数据结果
    generateOptions() {
      console.log('原始数据',this.tableListData)
      let result = []
      for (let [index,param] of this.tableListData.entries()) {
        let tableTr = this.tableDataOptions(index,param.tableData,param.titleList)
        for(let newArr of tableTr){
          result.push(newArr)
        }
      }
      return result
    },
    tableDataOptions(tableIndex,trList,headTdList){
      let tableListVal = []
      for (let [index,param] of trList.entries()) {
        let trVal = {}
        trVal.sortNo = index;//排序标识
        trVal.tableSortNo = tableIndex;//表格排序标识
        trVal.firstWeight = param.firstWeight;//首重
        trVal.firstWeightPrice = param.firstWeightPrice;//首重价格
        trVal.continuedWeight = param.continuedWeight;//续重
        trVal.continuedWeightPrice = param.continuedWeightPrice;//续重价格
        trVal.areaInfo = param.areaInfo;//地区树
        // trVal.areaInfo =  [{
        //                 areaId:"110000000000",
        //                 countryCode:"中国",
        //                 province:"北京",
        //                 city:"北京市",
        //                 area:"区域",
        //                 town:"街道",
        //             }]
        trVal.weightRangeInfo = this.tdDataOptions(index, param.weightList , headTdList) //表头
        tableListVal.push(trVal)
      }
      return tableListVal
    },
    tdDataOptions(tdIndex,tdList,headTdList){
        let tdArr = []
        for(let [headIndex,headParam]  of headTdList.entries()){
          let tdVal = {
            ...headParam //表头的列
          }
          tdVal.sortNo = headIndex, //列排序标识
          tdVal.price = tdList[headIndex].weightPrice //表体中的价格
          tdArr.push(tdVal)
        }
        return tdArr
    },
    // 提取地区树数据
    TreeChange(keys,trIndex,tableIndex) {
      this.$set(this.tableListData[tableIndex].tableData[trIndex], 'areaInfo', getTreeData(keys, this, 'areaId'))
      console.log('地区',getTreeData(keys, this, 'areaId'),trIndex,tableIndex)
      console.log(this.tableListData[tableIndex])
    },
    // 异步加载地区树
    async onLoadData(treeNode) {
      await onLoadData(treeNode, this)
    },
    //复制按钮
    handCopy(){
        this.copyVisible = true
        this.copyTableData = []
        this.getCustomerSelect()
        // this.drawerWidth = '100%'
        // this.$emit('drawerWidth', this.drawerWidth)
    },
    // 复制 - 确定
    copyRulesOk(){
        this.copyVisible = false
        let params = {
            id: this.projectId,
        }
        getExpressFeeDetail(params).then((res)=>{
            if(res.success){
                this.tableListData = this.changingDataFormat(res.result)
                console.log('回显数据',this.tableListData)
            }else{
                this.$message.warning(res.message, 6)
            }
        })
        
        // this.drawerWidth = 1000
        // this.$emit('drawerWidth', this.drawerWidth)
    },
    // 复制 - 取消
    copyRulesCancel(){
        this.copyVisible = false
        // this.drawerWidth = 1000
        // this.$emit('drawerWidth', this.drawerWidth)
    },
    // 选择框过滤
    filterOption(input, option) {
        return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
    },
    // 选择器
    handleChange(value) {
        console.log(`selected ${value}`);
    },
    // 搜索
    onSearch() {
        this.pageNo = 1
        this.pageSize = 10
        this.getExpressFeeRules()
        this.selectNumber = 0
        this.selectedRowKeys = []
    },
    // 重置
    onReset() {
        this.pageSize = 10
        this.pageNo = 1
        this.total = 0
        this.selectNumber = 0
        this.selectedRowKeys = []
        this.copyform.customerForm = undefined
        this.copyform.projectName = ''
        this.copyform.expressCompany = undefined
        this.copyform.expressCompanyList = []
    },
     //获取客户支付结算规则列表
    getExpressFeeRules(){
            let params = {
                organizeId: this.organizeId,
                projectName: this.copyform.projectName,
                customerCode: this.copyform.customerForm,
                companyCode: this.copyform.expressCompany,
                ruleType:'CUST',
                delFlag:0,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
            }
            this.tableLoading = true
            getExpressFeeRules(params).then((res)=>{
                console.log(res)
                this.tableLoading = false
                if(res.success){
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        // 序号
                    for(let i=0; i<res.result.records.length; i++){
                        res.result.records[i].serialNumber = i+1
                    }
                    this.copyTableData = res.result.records
                    this.total = res.result.total
                }else{
                    this.$message.warning(res.message)
                }
            })
    },
    // 获取客户下拉数据
    getCustomerSelect() {
        let params = {
            whCode: this.warehouseCode,
        }
        getCustomerName(params).then((res)=>{
            if(res.success){
                this.copyform.customerFormList = res.result
            }else{
                this.$message.warning(res.message, 6)
            }
        })
    },
    // 选择客户
    formCustomerChange() {
        this.copyform.expressCompany = undefined
        this.copyform.expressCompanyList = []
        this.getLogisticsList()
    },
    //获取快递公司名称下拉列表
    getLogisticsList(){
            let params = {
            whCode: this.warehouseCode,
            customerCode: this.copyform.customerForm,
        }
        getLogisticsList(params).then((res)=>{
            if(res.success){
                this.copyform.expressCompanyList = res.result.records
                // this.form.expressCompanyList =res.result.records
            }else{
                this.$message.warning(res.message, 6)
            }
        })
    },
    // 选中
    onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
        this.selectNumber = selectedRowKeys.length
        this.projectId = selectedRowKeys[0]
    },
    // 将后端返回的数据格式，转成表格遍历格式
    changingDataFormat(tableList){
      let baseList = [] //表格数据
      let newData = this.mapArray(tableList.ruleDetailInfo) //转换二维数组
      let _this = this;
      //循环后台数据转换表格数据
      newData.forEach((item, index) => {
            let obj = {
                "titleList": [],
                "tableData": []
            }
            item.forEach((item2, index2) => {
                let obj2 = {
                    "index": item2.sortNo+1,
                    "weightList": [],
                    "areaInfo": item2.areaInfo,
                    "treeValue":[],
                    "firstWeight": item2.firstWeight,
                    "firstWeightPrice": item2.firstWeightPrice,
                    "continuedWeight": item2.continuedWeight,
                    "continuedWeightPrice": item2.continuedWeightPrice
                }
                item2.areaInfo.forEach((loctionItem) => {
                  obj2.treeValue.push(loctionItem.areaId)
                })
                obj.tableData.push(obj2)
                item2.weightRangeInfo.forEach((item3, index3) => {
                    obj.titleList.push({
                        "weightBeginValue": item3.weightBeginValue,
                        "weightEndValue": item3.weightEndValue,
                        "sortNo": item3.sortNo
                    })
                    obj.titleList = _this.uniqSortNo(obj.titleList) // 列去重
                    obj2.weightList.push({
                        "weightPrice": item3.price
                    })
                })
            })
            baseList.push(obj)
      })
      return baseList
    },
    // tableSortNo 二维数组归类
    mapArray(target) {
        let obj = {};
        let result = [];
        target.map((item) => {
            let key = item.tableSortNo;
            //如果有这个key，就push一个对象
            if (obj[key]) {
                obj[key].push(item);
                //如果没有这个key，就把对象设置成数组格式（方便后面push进去）
            } else {
                obj[key] = [item];
            }
        });
        //根据obj中有几个对象，挨个push进去，组成最后的数组
        for (const key in obj) {
            const element = obj[key];
            result.push(element);
        }
        return result;
    },
    // sortNo 数组对象去重
    uniqSortNo(arr) {
        let obj = {};
        let peon = arr.reduce((cur, next) => {
            obj[next.sortNo] ? "" : obj[next.sortNo] = true && cur.push(next);
            return cur;
        }, [])
        return peon
    }
  },
  mounted() {
    this.tableListData = this.tableMoudle
    console.log('tableListInfo',this.tableListInfo)
  },
}
</script>

<style lang="less">
.mainTable {
  width:99%;
  overflow: auto;
  max-height: 208px; /* 设置固定高度 */
  position: relative;
  margin-bottom: 24px;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px !important;
  }
  &::-webkit-scrollbar-thumb {
    //滚条色
    border-radius: 6px;
    // background: #cdcdcd !important;
    background: #e9e9e9 !important;
  }
  &::-webkit-scrollbar-track {
    //底色
    background-color: #f6f6f6 !important;
  }
  td,
  th {
    /* 设置td,th宽度高度 */
    border: 1px solid gray;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align:center;
    border: 1px solid #e8e8e8;
  }
  th {
    font-weight: normal;
    color: #000;
    background-color: rgb(250, 250, 250);
  }
  .add_btn {
    width: 85%;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
    margin-top: 24px;
    .ant-btn-primary {
      background-color: #f5ae60;
      border: none;
    }
  }
  
  .tableStyle {
    table-layout: fixed;
    width: 1800px; /* 固定宽度 */
    margin: 0 auto;
    overflow: auto;
    max-height: 208px; /* 设置固定高度 */
    //border-collapse:collapse;
    border-collapse: separate;
  }
  td:first-child,
  th:first-child {
    position: sticky;
    left: -2px; /* 首行永远固定在左侧 */
    top: 0;
    background-color: #fff;
    z-index: 1;
    //   box-shadow: 6px 0 6px -4px rgb(0 0 0 / 15%);
  }
  td:last-child,
  th:last-child {
    position: sticky;
    right: 0; /* 尾行永远固定在右侧 */
    z-index: 1;
    //   background-color:rgb(123, 61, 61);
    border-left: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: -6px 0 6px -4px rgb(0 0 0 / 15%);
  }
  thead tr th {
    z-index:1;
    position: sticky;
    top: 0; /* 列首永远固定在头部  */
  }
  th:first-child {
    z-index: 2;
    border: 1px solid #e8e8e8;
    //   background-color: lightblue;
  }
  th:last-child {
    z-index: 2;
    //   background-color: lightblue;
  }
  .weightThStyle {
    width: 30%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: none;
    outline: none;
    background-color: #fff;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .weightStyle {
    width:90%;
    text-align: center;
    border: none;
    height: 30px;
    outline: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .inputStyle {
    width:90%;
    text-align: center;
    border: none;
    outline: none;
    height: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .editStyle {
    width: 20px;
    display: inline-block;
    cursor: pointer;
    margin-left: 6px;
    img {
      width: 100%;
    }
  }
  .moreStyle {
    width: 12px;
    display: inline-block;
    cursor: pointer;
    margin-left: 6px;
    img {
      width: 100%;
    }
  }

  .operationRow {
    width: 56px;
    span {
      cursor: pointer;
      img {
        width: 20px;
      }
    }
  }
}
.ant-select-dropdown{
  max-height: 50vh !important;
}
.ant-select-selection--multiple{
  min-height: 30px;
}
.tableContent{
  margin-top: 6px;
  max-height: 65vh;
  overflow-y: scroll;
}
.listTable{
    position: relative;
    .delectBtn{
      width:100%;
      height:30px;
      // background-color: #f0f;
      position: relative;
      .delectDiv{
          width: 24px;
          height: 24px;
          cursor: pointer;
          position: absolute;
          right:12px;
          z-index: 9;
          top: 0px;
          img{
            width: 100%;
          }
        }
    }
  }
  .button_Style{
    margin-left:45px;
    margin-top:14px;
    display: inline-block;
  }
</style>